@import url('./grid.less');
@import url('./customAntd.less');

:root {
  --mainColor: #4374f9;
  --mainActiveColor: #3263ec;
  --waterBlue: #f5f7fa;
  --radius: 6px;
  --mainLinearGradient: linear-gradient(
    62deg,
    var(--mainColor) 0%,
    var(--mainActiveColor) 100%
  );
  --basePadding: 10px;
  --red: #fa5353;
  --descGrey: #999999;
  --menuWidth: 60px;
  --toolbarHeight: 40px;
}

* {
  font-family: HarmonyOS;
}

@font-face {
  font-family: HarmonyOS;
  src: url('../assets/HarmonyOS_Sans_SC_Regular.ttf');
}

.page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.content-area {
  width: calc(100vw - var(--menuWidth));
  height: calc(100vh - var(--toolbarHeight));
}

.container {
  display: flex;
}

.standard-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.col-flex-container {
  display: flex;
  flex-direction: column;
}

.base-block {
  transition: all 0.4s;
  border-radius: var(--radius);
  background: #fcfcfc;
  box-shadow: 5px 5px 10px #d1d1d1, -5px -5px 10px #ffffff;
  border: 1px solid #f2f2f2;
}

.base-padding {
  padding: var(--basePadding);
}

.scroll {
  overflow: auto;
}

.tag {
  padding: 2px 6px;
  border-radius: var(--radius);
  font-size: 12px;
}

.main-btn {
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  width: 100px;
  transition: all 0.2s;
  background: var(--mainColor);
  color: white;
  &:hover {
    background-color: var(--mainActiveColor);
    border-color: var(--mainActiveColor);
  }
}

.main-container {
  flex: 1;
  position: relative;
}

::-webkit-scrollbar {
  width: 2px;
  height: 16px;
  background-color: transparent;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555;
}
